import { Card, Form, Input, Button, message } from 'antd';
import './index.scss'
import { useDispatch } from 'react-redux';
import { fetchLogin } from '@/store/modules/user';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const onFinsh = async (values) => {
    console.log(values);
    //触发异步action fetchLogin
    await dispatch(fetchLogin(values))
    //跳转到首页
    navigate('/')
    message.success('登录成功')
  }
  return (
    <div className='login'>
      <Card
        className='card'
        style={{
          width: 300,
        }}
      >
        <div className='title'>极客园</div>
        {/* 登录表单 */}
        <Form onFinish={onFinsh} className='form' validateTrigger="onBlur" >
          <Form.Item
            name="mobile"
            //先校验第一条通过后才校验第二条
            rules={[
              {
                required: true,
                message: '请输入手机号!'
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号格式!'
              },
            ]}
          >
            <Input placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input placeholder='请输入短信验证码' />
          </Form.Item>
          <Form.Item >
            <Button type='primary' htmlType="submit">登录</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login